﻿@{
	ViewBag.Title = "职位发布登记";
}

<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>

<div id="app">
	<table :model="khbh" class="tableEdit">
			<tr>
				<td colspan="10">您真正在做的业务是:人力资源-招聘管理--职位发布管理--职位发布登记</td>
			</tr>
		
		<tr>
			<th>I级机构</th>
			<td>
				<el-select v-model="khbh.FirstKindName" placeholder="请选择" :disabled="isReadOnly" v-on:change="CFSKName()">
					<el-option v-for="option in firstKindOptions"
							   :key="option.firstKindId"
							   :label="option.firstKindName"
							   :value="option.firstKindName">
					</el-option>
				</el-select>

			</td>
			<th>II级机构</th>
			<td>

				<el-select v-model="khbh.SecondKindName" placeholder="请选择" :disabled="erjixlk" v-on:change="CFTKName()">
					<el-option v-for="option in aw"
							   :key="option.secondKindId"
							   :label="option.secondKindName"
							   :value="option.secondKindName">
					</el-option>
				</el-select>

			</td>
			<th>III级机构</th>
			<td>

				<el-select v-model="khbh.ThirdKindName" :disabled="sanjixlk" placeholder="请选择">
					<el-option v-for="option in sanji"
							   :key="option.thirdKindId"
							   :label="option.thirdKindName"
							   :value="option.thirdKindName">
					</el-option>
				</el-select>

			</td>
			<th>招聘类型</th>
			<td>

				<el-select v-model="khbh.ZhaoPin" placeholder="请选择">
					<el-option v-for="option in zp"
							   :key="option.attributeKind"
							   :label="option.attributeName"
							   :value="option.attributeName">
					</el-option>
				</el-select>

			</td>
		</tr>
		<tr>
			<th>职位分类</th>
			<td>

				<el-select v-model="khbh.MajorKindName" :disabled="zwxlk" placeholder="请选择" v-on:change="CMName()">
					<el-option v-for="option in zwfl"
							   :key="option.mfkId"
							   :label="option.majorKindName"
							   :value="option.majorKindName">
					</el-option>
				</el-select>

			</td>
			<th>职位名称</th>
			<td>

				<el-select v-model="khbh.MajorName" :disabled="zwmcxlk" placeholder="请选择">
					<el-option v-for="option in zwmc"
							   :key="option.majorName"
							   :label="option.majorName"
							   :value="option.majorName">
					</el-option>
				</el-select>

			</td>
			<th>招聘人数</th>
			<td>
				<input type="text" v-model="khbh.HumanAmount" />
			</td>
			<th>截至日期</th>
			<td>
				<el-date-picker v-model="khbh.deadline" type="datetime" style="width: 200px;"></el-date-picker>
			</td>
		</tr>
		<tr>
			<th>{{bjr}}</th>
			<td>
				<input type="text" v-model="khbh.Register" readonly />
			</td>
			<th>{{shijian}}</th>
			<td>

				<span>{{ formattedCurrentTime }}</span>

			</td>
		</tr>
		<tr>
			<th>职位描述</th>
			<td colspan="10">
				<textarea v-model="khbh.MajorDescribe" style="resize: none;"></textarea>
			</td>
		</tr>
		<tr>
			<th>招聘要求</th>
			<td colspan="10">
				<textarea v-model="khbh.EngageRequired" style="resize: none;"></textarea>
			</td>
		</tr>
		<tfoot>
			<tr>
				<td colspan="10">
					<input type="button" value="确定" v-on:click="qd()" />&nbsp;&nbsp;<input type="button" value="清除" v-on:click="qc()" />
				</td>
			</tr>
		</tfoot>
	</table>

</div>


<script type="text/javascript">
	const { createApp, ref, reactive, onMounted, computed, onBeforeUnmount } = Vue
	var app = createApp({

		setup() {

			const currentTime = ref(new Date());

			//I级
			let isReadOnly = ref(false);
			//II级
			let erjixlk = ref(false);
			//III级
			let sanjixlk = ref(false);
			//职位分类
			let zwxlk = ref(false);
			//职位名称
			let zwmcxlk = ref(false);

			let SelectMreId = ref("");

			let bjr = ref("登记人");
			let shijian = ref("登记时间");


			const khbh = ref({
				FirstKindName: "",
				SecondKindName: "",
				ThirdKindName: "",
				ZhaoPin: "",
				HumanAmount: "",
				Register: "哈哈哈",
				deadline: "",
				MajorName: "",
				EngageRequired: "",
				MajorDescribe: "",
				MajorKindName: ""
			})


			// 职位分类编号下拉框选项数据
			let zwfl = ref("");
			// 职位分类编号下拉框绑定值
			function zwfltKindOptions() {

				axios.get('/EMR/SelectCMK')
					.then(res => {
						//console.info(res)
						zwfl.value = res.data;
					})
					.catch(err => {
						console.info(res);
					})
			}
			//存职位分类
			let zwmc = ref("");
			//更具职位分类编号拿到职位名称
			function CMName() {
				if (!this.khbh.MajorKindName) {
					return;
				}
				axios.get("/EMR/SelectCM2Name?name=" + this.khbh.MajorKindName)
					.then(function (response) {
						zwmc.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			// I级下拉框选项数据
			let firstKindOptions = ref("");
			//I级下拉框绑定值
			function fetchFirstKindOptions() {
				axios.get("/EMR/SelectCFFKName")
					.then(function (response) {
						firstKindOptions.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			//II级机构名称下拉框选项数据
			let aw = ref("");
			// II级机构名称下拉框绑定值
			function CFSKName() {
				if (!this.khbh.FirstKindName) {
					return;
				}
				axios.get("/EMR/SelectCFSKName?name=" + this.khbh.FirstKindName)
					.then(function (response) {
						aw.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}


			//III级机构名称下拉框选项数据
			let sanji = ref("");
			//III级机构名称下拉框绑定值
			function CFTKName() {
				if (!this.khbh.SecondKindName) {
					return;
				}
				// alert(this.khbh.SecondKindName);
				axios.get("/EMR/SelectCFTKName?name=" + this.khbh.SecondKindName)
					.then(function (response) {
						sanji.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}


			//招聘类型下拉框选项数据
			let zp = ref("");
			let zpname = ref("招聘类型");
			// 定义获取招聘类型选项的函数
			const fetchZhaoPinOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + zpname.value)
					.then(res => {
						zp.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//点击确定添加or修改事件
			function qd() {

				// //判断下拉框是否选中
				// if (!this.khbh.FirstKindName || !this.khbh.SecondKindName || !this.khbh.ThirdKindName || !this.khbh.ZhaoPin || !this.khbh.MajorKindName || !this.khbh.MajorName) {
				// 	alert("请填写完整信息!!");
				// 	return;
				// }
				// //判断招聘人数的输入
				// if (!isNumericAndIntegerLessThanThousand(khbh.value.HumanAmount)) {
				// 	return;
				// }
				// //时间框不可为空
				// if (!this.khbh.deadline) {
				// 	alert("截止时间不可为空!");
				// 	return;
				// }
				// const deadlineTime = new Date(this.khbh.deadline);
				// const currentTime = new Date();//当前时间
				// //判断截至时间不可小于当前时间
				// if (deadlineTime < currentTime) {
				// 	alert("截至时间不可小于现在时间!!");
				// 	return;
				// }

				//拿到MreId不为空则是修改,若为空则进行添加
				if (SelectMreId.value != null) {

					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/EMR/UpdateEMR', {
						MreId: SelectMreId.value,
						EngageType: this.khbh.ZhaoPin,
						HumanAmount: khbh.value.HumanAmount,
						Deadline: new Date(khbh.value.deadline).toISOString(),
						MajorDescribe: khbh.value.MajorDescribe,
						EngageRequired: khbh.value.EngageRequired,
						ChangeTime: new Date(formattedCurrentTime.value).toISOString(),
						Changer: khbh.value.Register
					}).then(function (response) {
						khbh.value.SecondKindName = "";
						khbh.value.FirstKindName = "";
						khbh.value.ThirdKindName = "";
						khbh.value.ZhaoPin = "";
						khbh.value.HumanAmount = "";
						khbh.value.deadline = "";
						khbh.value.MajorDescribe = "";
						khbh.value.EngageRequired = "";
						khbh.value.MajorKindName = "";
						khbh.value.MajorName = "";
						alert("变更完成!");
						window.location.href = '/EMR/EMRchanger';
					})
						.catch(function (error) {
							console.error(error);
						});

				} else {
					//拿到I级编号
					const yiji = this.firstKindOptions.find(option => option.firstKindName === this.khbh.FirstKindName);
					//拿到II级编号
					const erji = this.aw.find(option => option.secondKindName === this.khbh.SecondKindName);
					//拿到III级编号
					const sanjibh = this.sanji.find(option => option.thirdKindName === this.khbh.ThirdKindName);
					//拿到职位编号
					const zhiwei = this.zwfl.find(option => option.majorKindName === this.khbh.MajorKindName);

					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/EMR/EMRAdd', {
						FirstKindId: yiji.firstKindId,
						FirstKindName: this.khbh.FirstKindName,
						SecondKindId: erji.secondKindId,
						SecondKindName: this.khbh.SecondKindName,
						ThirdKindId: sanjibh.thirdKindId,
						ThirdKindName: this.khbh.ThirdKindName,
						MajorId: zhiwei.mfkId,
						MajorName: this.khbh.MajorName,
						HumanAmount: khbh.value.HumanAmount,
						EngageType: this.khbh.ZhaoPin,
						Deadline: new Date(khbh.value.deadline).toISOString(),// 格式化日期为 ISO 8601
						Register: khbh.value.Register,
						RegistTime: new Date(formattedCurrentTime.value).toISOString(), // 格式化日期为 ISO 8601
						MajorDescribe: khbh.value.MajorDescribe,
						EngageRequired: khbh.value.EngageRequired
					}).then(function (response) {
						khbh.value.SecondKindName = "";
						khbh.value.FirstKindName = "";
						khbh.value.ThirdKindName = "";
						khbh.value.ZhaoPin = "";
						khbh.value.HumanAmount = "";
						khbh.value.deadline = "";
						khbh.value.MajorDescribe = "";
						khbh.value.EngageRequired = "";
						khbh.value.MajorKindName = "";
						khbh.value.MajorName = "";
						alert("添加成功!");
					})
						.catch(function (error) {
							console.error(error);
						});
				}


				//alert(yiji.firstKindId + "--" + erji.secondKindId + "--" + sanjibh.thirdKindId + "--" + zhiwei.mfkId)



			}
			//清除所有数据
			function qc() {
				khbh.value.FirstKindName = "";
				khbh.value.ThirdKindName = "";
				khbh.value.ZhaoPin = "";
				khbh.value.HumanAmount = "";
				khbh.value.deadline = "";
				khbh.value.MajorDescribe = "";
				khbh.value.EngageRequired = "";
				khbh.value.SecondKindName = "";
				khbh.value.MajorKindName = "";
				khbh.value.MajorName = "";
			}
			//招聘人数判断
			function isNumericAndIntegerLessThanThousand(n) {
				var parsed = parseFloat(n);
				// 检查是否是数字且不是NaN，并且是有限的
				if (!isNaN(parsed) && Number.isFinite(parsed)) {
					// 检查是否没有小数部分，即是否为整数
					if (parsed === Math.floor(parsed)) {
						// 检查整数是否小于或等于1000并且是非负数
						if (parsed <= 1000 && parsed >= 0) {
							return true; // 如果满足所有条件，返回true
						} else {
							alert("招聘人数不得超过1000!!"); // 如果超过1000但仍然是整数，显示警告框
							return false; // 但仍然返回false，以指示不满足条件
						}
					}
				}
				// 如果不是数字、不是整数或不是非负整数，显示警告框并返回false
				alert("请填写正确的招聘人数!!");
				return false;
			}
			// 使用计算属性来格式化时间，包括年月日时分秒
			const formattedCurrentTime = computed(() => {
				const date = currentTime.value;
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			});
			// 更新时间的函数，每秒钟更新一次
			const updateCurrentTime = () => {
				currentTime.value = new Date();
			};



			// 在组件挂载时开始定时更新
			onMounted(() => {
				// 每秒钟更新一次时间
				setInterval(updateCurrentTime, 1000);
				//招聘类型
				fetchZhaoPinOptions();
				//I级
				fetchFirstKindOptions();
				//职位分类下拉框
				zwfltKindOptions();
				////登记人

				//nn();

				// 获取当前页面的查询参数
				const queryParams = new URLSearchParams(window.location.search);

				// 创建一个空对象来存储解析后的数据
				let rowData = {};

				// 遍历查询参数并解析到 rowData 对象中
				for (const [key, value] of queryParams) {
					// 解码 key 和 value，并存储到 rowData 中
					rowData[decodeURIComponent(key)] = decodeURIComponent(value);
				}
				SelectMreId.value = rowData.mreId;
				if (SelectMreId.value != null) {
					bjr.value = "变更人";
					shijian.value = "变更时间";
					isReadOnly.value = true;
					//II级
					erjixlk.value = true;
					//III级
					sanjixlk.value = true;
					//职位分类
					zwxlk.value = true;
					//职位名称
					zwmcxlk.value = true;

					khbh.value.FirstKindName = rowData.firstKindName;
					khbh.value.deadline = rowData.deadline;
					khbh.value.ThirdKindName = rowData.thirdKindName;
					khbh.value.ZhaoPin = rowData.engageType;
					khbh.value.HumanAmount = rowData.humanAmount;
					khbh.value.MajorDescribe = rowData.majorDescribe;
					khbh.value.EngageRequired = rowData.engageRequired;
					khbh.value.SecondKindName = rowData.secondKindName;
					khbh.value.MajorKindName = rowData.majorId;
					khbh.value.MajorName = rowData.majorName;

				} else {
					return;
				}

				// 现在 rowData 对象包含了从上一个页面传递过来的数据
				console.log(rowData);




			});
			// 在组件销毁前清除定时器
			onBeforeUnmount(() => {
				clearInterval(updateCurrentTime);
			});



			////拿到登记人
			//function nn(){
			//	const uTrueName = JSON.parse(sessionStorage.getItem('user') || '[]')
			//	khbh.value.Register = uTrueName.value;
			//}

			return {
				khbh,
				formattedCurrentTime,
				qd,
				isNumericAndIntegerLessThanThousand,
				firstKindOptions,
				fetchFirstKindOptions,
				aw,
				CFSKName,
				sanji,
				CFTKName,
				zpname,
				zp,
				fetchZhaoPinOptions,
				qc,
				zwfl,
				zwfltKindOptions,
				zwmc,
				CMName,
				isReadOnly,
				erjixlk,
				sanjixlk,
				zwmcxlk,
				zwxlk,
				SelectMreId,
				bjr,
				shijian,

				//nn,//拿到登记人
			}

		}
	});
	app.use(ElementPlus)
	app.mount('#app')

</script>

<style scoped>
	body {
		font-size: 12px;
	}

	a {
		text-decoration: none;
	}

	input[type='text'] {
		border: solid 2px black;
		width: 80%;
	}

	textarea {
		border: solid 2px black;
		width: 1100px;
		height: 80px;
	}

	.tableEdit {
		border: solid 2px black;
		border-collapse: collapse;
		width: 99%;
		margin: 25px;
	}

		.tableEdit th {
			text-align: right;
			padding: 5px 8px;
			border: solid 2px black;
			width: 100px;
			background-color: White;
		}

		.tableEdit td {
			text-align: left;
			padding: 5px 8px;
			border: solid 2px black;
		}

		.tableEdit thead {
			border: solid 2px black;
			/* background-color: #FFD553; */
			padding: 5px;
			font-weight: bold;
		}

</style>